<template>
    <div>
        <Header></Header>
        <div class="toolsList" v-html="list.content">
            
        </div>
    </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
import { getTools } from '../plugin/request'
import Header from '../components/header'
export default {
    components: { Header },
    setup() {
        const state = reactive({
            list: {
                content: ''
            }
        })
        onMounted(() => {
            getList()
        })
        const getList = async () => {
            let { data } = await getTools()
            if(data.status == 1) {
                state.list = data.data[0]
            }
        }
        return {
            ...toRefs(state)
        }
    }
}
</script>

<style scoped>
.toolsList{
    padding-top: 100px;
    width: 800px;
    margin:  0 auto;
}
@media screen and (max-width: 768px){
    .toolsList{
        width: 90%;
    }
}
</style>